<script lang="ts" setup>
import {
  UserOutlined,
  DownOutlined,
  DashboardOutlined,
  UserSwitchOutlined,
  CloudServerOutlined,
  InfoCircleOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
import PageHeaderWrapper from "./components/PageHeaderWrapper.vue";

const selectedKeys = ref(["dashboard"]);
</script>

<template>
  <a-layout>
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo">
        <img src="./assets/logo.png" />
        Test Panel
      </div>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
        <a-menu-item key="dashboard">
          <dashboard-outlined />
          <span class="nav-text">仪表盘</span>
        </a-menu-item>
        <a-sub-menu key="usermanager">
          <template #icon>
            <user-switch-outlined />
          </template>
          <template #title>用户管理</template>
          <a-menu-item key="userlist">用户列表</a-menu-item>
          <a-menu-item key="adduser">添加用户</a-menu-item>
          <a-menu-item key="testuser">测试选项</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #icon>
            <cloud-server-outlined />
          </template>
          <template #title>服务器管理</template>
          <a-menu-item key="serverlist">服务器列表</a-menu-item>
          <a-menu-item key="addserver">添加服务器</a-menu-item>
          <a-menu-item key="basicinfoserver">基础信息设置</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="2">
          <info-circle-outlined />
          <span class="systeminfo">系统信息</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header class="header">
        <div style="width: 100%; flex-shrink: 1"></div>
        <a-button style="margin-right: 16px" size="small">文档</a-button>
        <a-dropdown placement="bottomRight">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1"> 个人中心 </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="2"> 退出 </a-menu-item>
            </a-menu>
          </template>
          <a-button size="small">
            <user-outlined />
            繁花云
            <down-outlined />
          </a-button>
        </a-dropdown>
      </a-layout-header>
      <page-header-wrapper>
        <template #pageHeader>
          <a-page-header :ghost="false" title="Title" sub-title="This is a subtitle">
            <template #extra>
              <a-button key="3">Operation</a-button>
              <a-button key="2">Operation</a-button>
              <a-button key="1" type="primary">Primary</a-button>
            </template>
            <div class="content">
              <div class="main">
                <a-descriptions size="small" :column="2">
                  <a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
                  <a-descriptions-item label="Association">
                    <a>421421</a>
                  </a-descriptions-item>
                  <a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
                  <a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
                  <a-descriptions-item label="Remarks">
                    Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </a-page-header>
        </template>
        <a-card>
          {{ selectedKeys }}
        </a-card>
      </page-header-wrapper>
      <a-layout-footer :style="{ textAlign: 'center' }"> Ant Design ©2018 Created by Ant UED </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.logo {
  height: 64px;
  background: #002140;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 30px;
  margin-right: 8px;
}

.header {
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
}

.header > * {
  flex-shrink: 0;
}
</style>
